<template>
  <div class="page-container">
    <!-- 缩放容器：承载所有内容，基于原9600*2240分辨率 -->
    <div class="scale-container">
      <!-- 顶部标题 -->
      <div class="headTitle">{{ headTitle }}</div>
      <div class="headButton" @click="backHome"></div>
      <div class="left1" @click="goToService('guangzhou')"></div>
      <div class="right1" @click="goToService('shanghai')"></div>
      <!-- 左边内容 -->
      <div class="left">
        <div class="box">
          <div class="headImg"></div>
          <div class="title">中汽研汽车检验中心(宁波)有限公司</div>
          <div class="content">
            <img class="img1" src="/imgs/ningbo/图片1.png" />
            <p class="contentTitle">
              中汽研汽车检验中心（宁波）有限公司是由中国汽车技术研究中心有限公司和中国检验认证集团宁波有限公司共同出资组建的第三方汽车产品检测及技术服务机构，可承担汽车整车的法规检验检测、研发验证试验及进出口认证检测业务,具备排放节能、热管理、整车集成、智能网联、新能源、被动安全等检测能力。公司先后取得了实验室认可、国家级资质认定、CCC指定实验室、道路运输车辆达标车检测机构资质、机动车和非道路移动机械环保信息公开检测机构资质，国家机动车产品质量检验检测中心（浙江）（筹）通过国家市场监督管理总局现场验收。
            </p>
          </div>
        </div>
        <!-- 视频弹窗（全屏，通过showVideo控制显示） -->
        <div class="video-modal" v-if="showVideo" @click="closeVideo">
          <!-- 关闭按钮 -->
          <div class="video-close" @click.stop="closeVideo">×</div>
          <!-- 视频播放器（视频待提供，先留占位） -->
          <video class="video-player" controls autoplay ref="videoRef" @ended="closeVideo">
            <!-- 后续替换为实际视频地址 -->
            <source :src="videoUrl" type="video/mp4">
            您的浏览器不支持视频播放
          </video>
        </div>
        <div class="box2">
          <div class="headImg"></div>
          <div class="title">组织架构</div>
          <div class="content" style="text-align: center;">
            <img class="img1" style="margin-top: 80px;width: 1162px;height: 1009px;" src="/imgs/ningbo/组 7775.png" />
          </div>
        </div>
        <div class="box3">
          <div class="headImg"></div>
          <div class="title">服务能力</div>
          <div class="content" @click="goToService('discharge')">
            <div class="img1"><span class="title1">排放节能</span></div>
            <div class="img2">
              <div class="img2-1"></div>
              <div class="imgicon"></div>
            </div>
          </div>
          <div class="content" @click="goToService('hot')">
            <div class="img1"><span class="title1">热管理</span></div>
            <div class="img2">
              <div class="img2-2"></div>
              <div class="imgicon"></div>
            </div>
          </div>
          <div class="content" @click="goToService('car')">
            <div class="img1"><span class="title1">整车集成</span></div>
            <div class="img2">
              <div class="img2-3"></div>
              <div class="imgicon"></div>
            </div>
          </div>
          <div class="content" @click="goToService('intelligent')">
            <div class="img1"><span class="title1">智能网联</span></div>
            <div class="img2">
              <div class="img2-4"></div>
              <div class="imgicon"></div>
            </div>
          </div>
          <div class="content" @click="goToService('newEnergy')">
            <div class="img1"><span class="title1">新能源</span></div>
            <div class="img2">
              <div class="img2-5"></div>
              <div class="imgicon"></div>
            </div>
          </div>
          <div class="content" @click="goToService('safe')">
            <div class="img1"><span class="title1">被动安全</span></div>
            <div class="img2">
              <div class="img2-6"></div>
              <div class="imgicon"></div>
            </div>
          </div>
          <div class="content" @click="goToService('certification')">
            <div class="img1"><span class="title1">进出口认证</span></div>
            <div class="img2">
              <div class="img2-7"></div>
              <div class="imgicon"></div>
            </div>
          </div>
        </div>
      </div>
      <!-- 中间内容 -->
      <div class="middle">
        <div class="img1"></div>
        <div class="img2"></div>
        <div class="content">
          <div class="years">2012</div>
          <div class="values">宁波前湾公司成立</div>
        </div>
        <div class="content2">
          <div class="years">2013</div>
          <div class="values">宁波梅山公司成立</div>
        </div>
        <div class="content3">
          <div class="years">2014</div>
          <div class="values">首批员工正式进驻公司</div>
        </div>
        <div class="content4">
          <div class="years">2015</div>
          <div class="values">宁波前湾公司获CMA/CNAS资质</div>
        </div>
        <div class="content5">
          <div class="years">2016</div>
          <div class="values">宁波检验中心正式成立，当年实现总产值破亿</div>
        </div>
        <div class="content6">
          <div class="years">2017</div>
          <div class="values">宁波梅山公司成为CCC实验室CCAP/CQC委托实验室</div>
        </div>
        <div class="content7">
          <div class="years">2018</div>
          <div class="values">宁波检验中心获评宁波市企业工程（技术）中心</div>
        </div>
        <div class="content8">
          <div class="years">2019</div>
          <div class="values">宁波检验中心成功获评高新技术企业</div>
        </div>
        <div class="content9">
          <div class="years">2020</div>
          <div class="values">获得道路运输车辆达标车型检测资质</div>
        </div>
        <div class="content10">
          <div class="years">2021</div>
          <div class="values">省级CMA资质升级为国家级检验检测机构资质认定</div>
        </div>
        <div class="content11">
          <div class="years">2022</div>
          <div class="values">宁波梅山公司获批异地实验室认可汽车热舒适性联盟专家委员会顺利召开</div>
        </div>
        <div class="content12">
          <div class="years">2023</div>
          <div class="values">宁波前湾公司获批筹建国家机动车产品质量检验检测中心（浙江）</div>
        </div>
        <div class="content13">
          <div class="years">2024</div>
          <div class="values">宁波零部件公司转出、宁波梅山公司改制转型国家机动车产品质量检验检测中心（浙江）(筹) 顺利通过浙江省市场监督管理局预验收</div>
        </div>
        <div class="content14">
          <div class="years">2025</div>
          <div class="values">国家级专精特精“小巨人”</div>
          <div class="values">国家机动车产品质量检验检测中心（浙江）（筹）通过</div>
          <div class="values">国家市场监督管理总局现场验收</div>
        </div>
        <div class="content15">中汽研汽车检验中心（宁波）有限公司</div>
        <div class="content16"></div>
        <div class="content17">宁波梅山卡达克汽车检测有限公司</div>
        <div class="content18">
          <div class="tubiao1"></div>
          <span class="tubiaoTitle">注册资金<span class="tubiaoValue">2.2</span>亿元</span>
          <div class="tubiao2"></div>
          <span class="tubiaoTitle">占地面积<span class="tubiaoValue">96</span>亩</span>
          <div class="tubiao3"></div>
          <span class="tubiaoTitle">员工总数<span class="tubiaoValue">200+</span>人</span>
          <div class="tubiao4"></div>
          <span class="tubiaoTitle">设备总数<span class="tubiaoValue">1000+</span>余台</span>
        </div>
        <div class="content19">
          <div class="img1"></div>
          <div class="img2"></div>
          <div class="img3"></div>
          <span class="title">宁波</span>
          <div class="pointImg"></div>
          <div class="img4"></div>
          <div class="img5"></div>
          <div ref="lottieRef" class="lottie-box"></div>
        </div>
      </div>
      <!-- 右边内容 -->
      <div class="right">
        <!-- 资质模块 -->
        <div class="box">
          <div class="headImg"></div>
          <div class="title">资质</div>
          <!-- 第一列滚动容器 -->
          <div class="content">
            <div class="scroll-container" data-type="qualification" data-col="1">
              <div class="scroll-item">
                <img class="img1" src="/imgs/ningbo/资质/1-1.jpg" />
                <p class="contentTitle">通过中国合格评定国家认可委员会实验室认可（CNAS）</p>
              </div>
              <div class="scroll-item">
                <img class="img1" src="/imgs/ningbo/资质/1-2.jpg" />
                <p class="contentTitle">国家CCC指定实验室</p>
              </div>
              <div class="scroll-item">
                <img class="img1" src="/imgs/ningbo/资质/1-3.png" />
                <p class="contentTitle">道路运输车辆达标车型检测资质</p>
              </div>
              <!-- 复制第一个条目用于无缝循环 -->
              <div class="scroll-item copy-first"></div>
            </div>
          </div>
          <!-- 第二列滚动容器 -->
          <div class="content" style="margin-left: 1100px;">
            <div class="scroll-container" data-type="qualification" data-col="2">
              <div class="scroll-item">
                <img class="img1" src="/imgs/ningbo/资质/2-1.jpg" />
                <p class="contentTitle">道路运输车辆达标车型检测资质</p>
              </div>
              <div class="scroll-item">
                <img class="img1" src="/imgs/ningbo/资质/2-2.png" />
                <p class="contentTitle">TUV南德授权</p>
              </div>
              <div class="scroll-item">
                <img class="img1" src="/imgs/ningbo/资质/2-3.png" />
                <p class="contentTitle">生态环境部机动车排污中心机动车和非道路移动机械检测机构</p>
              </div>
              <!-- 复制第一个条目用于无缝循环 -->
              <div class="scroll-item copy-first"></div>
            </div>
          </div>
          <!-- 第三列滚动容器 -->
          <div class="content" style="margin-left: 2100px;">
            <div class="scroll-container" data-type="qualification" data-col="3">
              <div class="scroll-item">
                <img class="img1" src="/imgs/ningbo/资质/3-1.png" />
                <p class="contentTitle">澳大利亚交通和地区服务部(DOTARS)的车辆安全标准部(VSS)实验室认可</p>
              </div>
              <div class="scroll-item">
                <img class="img1" src="/imgs/ningbo/资质/3-2.png" />
                <p class="contentTitle">中国船级社产品检测和试验机构</p>
              </div>
              <div class="scroll-item">
                <img class="img1" src="/imgs/ningbo/资质/3-3.png" />
                <p class="contentTitle">“浙江省新能源汽车技术协同创新中心”资</p>
              </div>
              <div class="scroll-item">
                <img class="img1" src="/imgs/ningbo/资质/3-4.png" />
                <p class="contentTitle">CQC委托检测试验室</p>
              </div>
              <!-- 复制第一个条目用于无缝循环 -->
              <div class="scroll-item copy-first"></div>
            </div>
          </div>
        </div>

        <!-- 荣誉模块 -->
        <div class="box" style="margin-top: 400px;">
          <div class="headImg"></div>
          <div class="title">荣誉</div>
          <div class="content">
            <div class="scroll-container" data-type="honor" data-col="1">
              <div class="scroll-item">
                <img class="img2" src="/imgs/ningbo/荣誉/国家级/1-1.png" />
                <p class="contentTitle">国家知识产权优势企业</p>
              </div>
              <div class="scroll-item">
                <img class="img2" src="/imgs/ningbo/荣誉/国家级/1-2.png" />
                <p class="contentTitle">第四批国家服务型制造示范平台</p>
              </div>
              <div class="scroll-item">
                <img class="img2" src="/imgs/ningbo/荣誉/国家级/1-3.png" />
                <p class="contentTitle">国家产业技术基础公共服务平台</p>
              </div>
              <div class="scroll-item">
                <img class="img2" src="/imgs/ningbo/荣誉/国家级/1-4.jpg" />
                <p class="contentTitle">高新技术企业</p>
              </div>
              <div class="scroll-item">
                <img class="img2" src="/imgs/ningbo/荣誉/国家级/1-5.png" />
                <p class="contentTitle">浙江省高端装备制造业重点领域国内首台（套）</p>
              </div>
              <div class="scroll-item">
                <img class="img2" src="/imgs/ningbo/荣誉/国家级/1-6.jpg" />
                <p class="contentTitle">亚洲质量改进案例二等奖</p>
              </div>
              <!-- 复制第一个条目用于无缝循环 -->
              <div class="scroll-item copy-first"></div>
            </div>
          </div>
          <div class="content" style="margin-left: 1100px;">
            <div class="scroll-container" data-type="honor" data-col="2">
              <div class="scroll-item">
                <img class="img2" src="/imgs/ningbo/荣誉/省市级/2-1.jpg" />
                <p class="contentTitle">浙江省科技型中小企业证书</p>
              </div>
              <div class="scroll-item">
                <img class="img2" src="/imgs/ningbo/荣誉/省市级/2-2.png" />
                <p class="contentTitle">浙江省汽车及零部件产业科技创新服务平台</p>
              </div>
              <div class="scroll-item">
                <img class="img2" src="/imgs/ningbo/荣誉/省市级/2-3.JPG" />
                <p class="contentTitle">浙江省服务型制造示范平台</p>
              </div>
              <div class="scroll-item">
                <img class="img2" src="/imgs/ningbo/荣誉/省市级/2-4.png" />
                <p class="contentTitle">浙江省级高新技术企业研究开发中心</p>
              </div>
              <div class="scroll-item">
                <img class="img2" src="/imgs/ningbo/荣誉/省市级/2-5.png" />
                <p class="contentTitle">浙江省企业技术中心</p>
              </div>
              <div class="scroll-item">
                <img class="img2" src="/imgs/ningbo/荣誉/省市级/2-6.png" />
                <p class="contentTitle">“之江铸网-2024”攻防演练卓越攻击单位</p>
              </div>
              <div class="scroll-item">
                <img class="img2" src="/imgs/ningbo/荣誉/省市级/2-7.jpg" />
                <p class="contentTitle">浙江省高端装备制造业重点领域国内首台（套）</p>
              </div>
              <div class="scroll-item">
                <img class="img2" src="/imgs/ningbo/荣誉/省市级/2-8.jpg" />
                <p class="contentTitle">“之江铸网-2025”攻防演练优秀支撑单位</p>
              </div>
              <div class="scroll-item">
                <img class="img2" src="/imgs/ningbo/荣誉/省市级/2-9.jpg" />
                <p class="contentTitle">2025-2026年网络数据安全技术支撑单位</p>
              </div>
              <!-- 复制第一个条目用于无缝循环 -->
              <div class="scroll-item copy-first"></div>
            </div>
          </div>
          <div class="content" style="margin-left: 2100px;">
            <div class="scroll-container" data-type="honor" data-col="3">
              <div class="scroll-item">
                <img class="img2" src="/imgs/ningbo/荣誉/中央级/3-1.JPG" />
                <p class="contentTitle">中央企业青年文明号</p>
              </div>
              <div class="scroll-item">
                <img class="img2" src="/imgs/ningbo/荣誉/中央级/3-2.jpg" />
                <p class="contentTitle">第六届中央企业QC小组成果发表赛三等奖</p>
              </div>
              <div class="scroll-item">
                <img class="img2" src="/imgs/ningbo/荣誉/中央级/3-3.jpg" />
                <p class="contentTitle">中国汽车工程学会科学技术奖三等奖</p>
              </div>
              <div class="scroll-item">
                <img class="img2" src="/imgs/ningbo/荣誉/中央级/3-4.jpg" />
                <p class="contentTitle">“杭氧杯”第三届全国机械工业产品质量创新大赛银奖</p>
              </div>
              <div class="scroll-item">
                <img class="img2" src="/imgs/ningbo/荣誉/中央级/3-5.jpg" />
                <p class="contentTitle">第七届中央企业QC小组成果发表赛三等奖</p>
              </div>
              <div class="scroll-item">
                <img class="img2" src="/imgs/ningbo/荣誉/中央级/3-6.jpg" />
                <p class="contentTitle">环模试验QC小组荣获第八届中央企业QC小组成果发表赛二等奖</p>
              </div>
              <div class="scroll-item">
                <img class="img2" src="/imgs/ningbo/荣誉/中央级/3-7.jpg" />
                <p class="contentTitle">空调假人QC小组荣获第八届中央企业QC小组成果发表赛一等奖</p>
              </div>
              <!-- 复制第一个条目用于无缝循环 -->
              <div class="scroll-item copy-first"></div>
            </div>
          </div>
        </div>

        <div class="box3">
          <div class="headImg"></div>
          <div class="title">人才梯队</div>
          <div class="content">
            <div class="img1"></div>
            <span class="contentTitle">本科及以上<span class="contentValue">98%</span>，硕士及以上<span
                class="contentValue">34%</span>，工程师及以上<span class="contentValue">76%</span>，高层次人才<span
                class="contentValue">40%</span></span>
          </div>
          <div class="content2">
            <div class="img1"></div>
            <div class="title">员工学历分布</div>
            <piechartKj3D class="chartsGl" :datalist="pieData">
            </piechartKj3D>
          </div>
          <div class="content2" style="margin-left: 400px;">
            <div class="img1"></div>
            <div class="title">员工职称分布</div>
            <piechartKj3D class="chartsGl" :datalist="pieData2">
            </piechartKj3D>
          </div>
          <div class="content2" style="margin-left: 800px;">
            <div class="img1" style="width: 525px;"></div>
            <div class="title">高层次人才队伍建设趋势</div>
            <div ref="chartRef" class="chartsGl2"></div>
          </div>
        </div>
        <div class="box4">
          <div class="content2">
            <div class="img1"></div>
            <div class="title">宁波市人才分类</div>
            <div class="img2"></div>
            <span class="title1-1" style="margin-top: 82px;">拔尖人才（<span class="value">1人</span>）</span>
            <span class="title1-1" style="margin-top: 230px;">高级人才（<span class="value">5人</span>）</span>
            <span class="title1-1" style="margin-top: 380px;">高层次人才（<span class="value">7人</span>）</span>
          </div>
          <div class="content2" style="margin-left: 400px;">
            <div class="img1"></div>
            <div class="title">中心人才工程梯队</div>
            <div class="img2"></div>
            <span class="title2-1" style="margin-top: 82px;">学科带头人（<span class="value">3人</span>）</span>
            <span class="title2-1" style="margin-top: 230px;">青年科技骨干（<span class="value">11人</span>）</span>
            <span class="title2-1" style="margin-top: 380px;">科研人员（<span class="value">40人</span>）</span>
          </div>
        </div>
        <div class="box5">
          <div class="content2">
            <div class="img1"></div>
            <div class="title">年龄分布</div>
            <span class="text">员工平均年龄<span class="headValue">34</span>岁，是一支年轻化的人才队伍</span>
            <div class="tip"> <span class="title3">占比</span><span class="title3" style="color: #FF830A;">37%</span>
            </div>
            <div ref="chartRef2" class="chartsGl2"></div>
          </div>
        </div>
      </div>
    </div>

  </div>
</template>
<script setup>
import { ref, onMounted, nextTick } from "vue";
import piechartKj3D from "../../components/chart/chartPie.vue";
import * as echarts from 'echarts';
import lottie from 'lottie-web';
//路由
import { useRouter } from 'vue-router'
const router = useRouter();
const headTitle = ref('中国汽车技术研究中心有限公司数字沙盘')
//跳转路由
const backHome = () => {
  router.push({ name: 'home' })
}
// 响应式数据
const lottieRef = ref(null);
let animationInstance = null;
// 响应式状态：控制弹窗显示
const showVideo = ref(false);
// 视频DOM引用（用于控制播放/暂停）
const videoRef = ref(null);
// 视频地址（待提供，先定义变量占位）
const videoUrl = ref(''); // 实际使用时替换为：'/videos/title.mp4' 等
// 点击触发区域，显示弹窗并加载视频
const playVideo = () => {
  showVideo.value = true;
  // 视频地址准备好后，这里可以动态设置（例如从接口获取）
  videoUrl.value = '/video/title.mp4';
  // 延迟播放（确保DOM已渲染）
  setTimeout(() => {
    if (videoRef.value) {
      videoRef.value.play().catch(err => {
        console.log('视频自动播放失败（浏览器限制），请点击播放按钮', err);
      });
    }
  }, 100);
};
// 关闭弹窗，停止视频
const closeVideo = () => {
  console.log("关闭按钮");

  if (videoRef.value) {
    videoRef.value.pause(); // 暂停播放
    videoRef.value.src = ''; // 清空视频源，避免继续加载
  }
  showVideo.value = false;
};

// 修改initScrollAnimations函数，实现不同数量条目下的同步滚动
const initScrollAnimations = () => {
  const containers = Array.from(document.querySelectorAll('.scroll-container'));
  if (containers.length === 0) return;
  // 全局配置（所有容器共享的滚动节奏）
  const pauseTime = 2500; // 统一停顿时间（2.5秒）
  const scrollDuration = 500; // 统一滚动动画时间（0.5秒）
  let isAnimating = false; // 全局动画锁，防止并发滚动
  let globalTimer = null; // 全局计时器控制同步节奏
  // 为每个容器初始化独立状态（记录自己的进度）
  const containerStates = containers.map(container => {
    const items = Array.from(container.querySelectorAll('.scroll-item:not(.copy-first)'));
    const itemCount = items.length;
    // 复制第一个条目用于自己的无缝循环
    const copyFirst = container.querySelector('.copy-first');
    copyFirst.innerHTML = items[0] ? items[0].innerHTML : '';
    copyFirst.style.display = itemCount > 0 ? 'flex' : 'none';
    return {
      container, // 容器DOM
      items, // 自己的条目列表
      itemCount, // 自己的条目总数（如3或8）
      currentIndex: 0, // 自己当前的索引
      width: container.offsetWidth // 自己的宽度（支持不同列宽度）
    };
  });
  // 同步触发所有容器滚动（各自走自己的下一个索引）
  const scrollAll = () => {
    if (isAnimating) return;
    isAnimating = true;
    // 每个容器计算自己的下一个索引和目标位置
    containerStates.forEach(state => {
      if (state.itemCount === 0) return; // 无内容则不滚动
      // 计算自己的下一个索引（独立循环）
      let nextIndex = state.currentIndex + 1;
      // 目标位置：如果是最后一个条目，下一个滚动到复制的条目（用于无缝循环）
      const targetPosition = nextIndex <= state.itemCount
        ? -nextIndex * state.width
        : -state.itemCount * state.width; // 最后一个条目后，先滚动到复制的条目
      // 应用滚动（所有容器同时开始动画）
      state.container.style.transition = `transform ${scrollDuration}ms ease`;
      state.container.style.transform = `translateX(${targetPosition}px)`;
      // 更新自己的索引（临时存为nextIndex，动画结束后确认）
      state.tempNextIndex = nextIndex;
    });
    // 动画结束后处理每个容器的状态（独立复位）
    setTimeout(() => {
      containerStates.forEach(state => {
        if (state.itemCount === 0) return;
        // 如果滚动到了复制的条目（超出自己的条目总数），则无缝复位
        if (state.tempNextIndex > state.itemCount) {
          state.container.style.transition = 'none'; // 取消动画，瞬间复位
          state.container.style.transform = 'translateX(0)';
          state.currentIndex = 0; // 重置为第一个条目
          // 重新启用过渡效果（下次滚动生效）
          setTimeout(() => {
            state.container.style.transition = `transform ${scrollDuration}ms ease`;
          }, 50);
        } else {
          // 正常更新索引
          state.currentIndex = state.tempNextIndex;
        }
      });
      isAnimating = false;
      startGlobalTimer(); // 所有容器处理完后，启动下一次全局计时
    }, scrollDuration);
  };
  // 全局计时器：控制所有容器同步停顿后滚动
  const startGlobalTimer = () => {
    clearTimeout(globalTimer);
    globalTimer = setTimeout(scrollAll, pauseTime);
  };
  // 全局暂停/继续：鼠标悬停任何容器，所有容器一起暂停
  containers.forEach(container => {
    container.addEventListener('mouseenter', () => {
      clearTimeout(globalTimer);
    });
    container.addEventListener('mouseleave', () => {
      if (!isAnimating) {
        startGlobalTimer();
      }
    });
  });
  // 初始启动
  startGlobalTimer();
};

// 初始化 Lottie 动画
const initLottieAnimation = () => {
  if (lottieRef.value) {
    animationInstance = lottie.loadAnimation({
      container: lottieRef.value,
      path: '/animations/line.json',
      loop: true,
      autoplay: true,
    });
  }
};

//跳转路由
const goToService = (item) => {
  router.push({ name: item })
}
//建设趋势
const chartRef = ref(null)
// 存储 ECharts 实例
let chartInstance = null
//年龄分布
const chartRef2 = ref(null)
// 存储 ECharts 实例
let chartInstance2 = null
//初始化年龄
const initChartAge = () => {
  if (chartRef2.value && !chartInstance2) {
    chartInstance2 = echarts.init(chartRef2.value);
    const values = [39, 34, 25, 13, 6]; // 顶部黄色数值
    const percentages = [34, 29, 21, 11, 5]; // 中间白色百分比
    const categories = ['30岁及以下', '31至35岁', '36至40岁', '41至45岁', '50岁以上'];
    const option = {
      // 调整网格边距，确保标签不被裁剪
      grid: {
        left: '8%',
        right: '22%',
        top: '12%',
        bottom: '18%',
        containLabel: true
      },

      xAxis: {
        type: 'category',
        data: categories,
        axisLabel: {
          color: '#FFFFFF',
          fontSize: 20,
          margin: 10 // 标签与x轴的距离，增强间距感
        },
        axisLine: {
          show: true,   // 是否显示轴线
          lineStyle: {
            color: '#ccc' // 轴线颜色
          }
        }
      },

      yAxis: {
        type: 'value',
        splitLine: {
          show: true,
          lineStyle: {
            color: 'rgba(255, 255, 255, 0.1)',
            type: 'dashed'
          }
        },
        axisLabel: {
          color: '#FFFFFF',
          fontSize: 20,
          formatter: '{value}'
        },
        axisLine: {
          show: true,   // 是否显示轴线
          lineStyle: {
            color: '#ccc' // 轴线颜色
          }
        },
        min: 0,
        max: 45, // 略高于最大值40，避免顶部数值贴边
        boundaryGap: [0, 0.1]
      },

      // 右侧"占比34%"及虚线框，精准定位
      graphic: [
        {
          type: 'text',
          left: '78%', // 向右微调，与图片位置一致
          top: '28%',
          formatter: '{a|占比 }{b|34%}',
          rich: {
            a: { color: '#FFFFFF', fontSize: 16, fontWeight: 'bold' },
            b: { color: '#FFD700', fontSize: 18, fontWeight: 'bold' }
          }
        },
        {
          type: 'rect',
          left: '73%', // 虚线框左移，包裹文字
          top: '24%',
          width: '16%',
          height: '12%',
          style: {
            stroke: 'rgba(255, 255, 255, 0.3)',
            fill: 'transparent',
            lineWidth: 1,
            lineDash: [5, 3]
          }
        }
      ],

      series: [
        // 主柱状图系列（显示柱子和中间白色百分比）
        {
          data: values.map((val, idx) => ({
            value: val,
            percent: percentages[idx]
          })),
          type: 'bar',
          itemStyle: {
            color: '#3681D7', // 蓝色柱子，与图片一致
            borderRadius: [4, 4, 0, 0] // 顶部圆角
          },
          barWidth: '40%', // 柱子宽度，与图片比例匹配
          // 柱子中间的白色百分比标签（核心修复）
          label: {
            show: true,
            color: '#FFFFFF',
            fontSize: 16,
            fontWeight: 'bold',
            z: 10, // 确保在柱子上方
            hideOverlap: false,
            formatter: params => `${params.data.percent}%`
          },
          labelLine: { show: false }
        },

        // 顶部黄色数值标签系列（独立系列，避免冲突）
        {
          type: 'scatter',
          coordinateSystem: 'cartesian2d',
          data: values.map((val, idx) => ({
            value: [idx, val], // x轴索引（对应类别），y轴值（柱子高度）
            labelVal: val
          })),
          symbolSize: 0, // 隐藏散点本身
          label: {
            show: true,
            position: 'top', // 位于柱子顶部
            color: '#FFD700', // 黄色文字，与图片一致
            fontSize: 14,
            fontWeight: 'bold',
            formatter: params => params.data.labelVal,
            offset: [0, -8] // 与柱子顶部的距离，避免贴边
          }
        }
      ]
    };
    chartInstance2.setOption(option);
  }
};

//初始化建设趋势
const initChartRate = () => {
  if (chartRef.value && !chartInstance) {
    chartInstance = echarts.init(chartRef.value);
    const option = {
      tooltip: {
        trigger: 'axis',
        backgroundColor: 'rgba(0, 20, 50, 0.8)',
        borderColor: 'rgba(74, 144, 226, 0.3)',
        borderWidth: 1,
        textStyle: { color: '#FFFFFF' },
        padding: 10
      },

      legend: {
        data: ['硕士及以上学历', '高级及以上职称'],
        bottom: 10,
        left: 'center',
        textStyle: {
          color: '#FFFFFF',
          fontSize: 20
        },
        itemWidth: 18,
        itemHeight: 18,
        itemGap: 20
      },

      // 核心：增大grid左右边距，让x轴标签两侧有更多空间
      grid: {
        left: '10%', // 从8%调整为10%，左侧留白增加
        right: '10%', // 从8%调整为10%，右侧留白增加
        top: '15%',
        bottom: '15%',
        containLabel: true
      },

      xAxis: {
        type: 'category',
        // 核心：boundaryGap设为true，x轴两侧预留空白（标签与边缘产生间距）
        boundaryGap: true,
        data: ['2023年', '2024年', '2025年'],
        axisTick: {
          show: true,
          length: 4,
          lineStyle: { color: 'rgba(255, 255, 255, 0.2)' },
          // 限制刻度线只在数据点显示，避免超出标签范围
          alignWithLabel: true
        },
        axisLabel: {
          color: '#FFFFFF',
          fontSize: 20
        },
        axisLine: {
          show: true,   // 是否显示轴线
          lineStyle: {
            color: '#ccc' // 轴线颜色
          }
        },
        splitLine: {
          show: true,
          lineStyle: {
            color: 'rgba(255, 255, 255, 0.1)',
            type: 'dashed'
          }
        }
      },

      yAxis: {
        type: 'value',
        axisTick: {
          show: true,
          length: 4,
          lineStyle: { color: 'rgba(255, 255, 255, 0.2)' }
        },
        axisLabel: {
          color: '#FFFFFF',
          fontSize: 20
        },
        axisLine: {
          show: true,   // 是否显示轴线
          lineStyle: {
            color: '#ccc' // 轴线颜色
          }
        },
        splitLine: {
          show: true,
          lineStyle: {
            color: 'rgba(255, 255, 255, 0.1)',
            type: 'dashed'
          }
        },
        min: 0,
        max: 50,
        interval: 10
      },

      series: [
        {
          name: '硕士及以上学历',
          type: 'line',
          data: [31, 35, 40],
          lineStyle: {
            color: '#4A90E2',
            width: 2.5,
            smooth: true
          },
          symbol: 'circle',
          symbolSize: 8,
          itemStyle: {
            color: '#FFFFFF',
            borderColor: '#4A90E2',
            borderWidth: 2
          },
          label: {
            show: true,
            position: 'top',
            color: '#FFFFFF',
            fontSize: 14,
            fontWeight: 'bold',
            offset: [0, -10]
          },
          areaStyle: {
            color: {
              type: 'linear',
              x: 0,
              y: 0,
              x2: 0,
              y2: 1,
              colorStops: [{
                offset: 0, color: 'rgba(74, 144, 226, 0.2)'
              }, {
                offset: 1, color: 'rgba(74, 144, 226, 0)'
              }]
            }
          }
        },
        {
          name: '高级及以上职称',
          type: 'line',
          data: [14, 18, 21],
          lineStyle: {
            color: '#FF7D00',
            width: 2.5,
            smooth: true
          },
          symbol: 'circle',
          symbolSize: 8,
          itemStyle: {
            color: '#FFFFFF',
            borderColor: '#FF7D00',
            borderWidth: 2
          },
          label: {
            show: true,
            position: 'top',
            color: '#FFFFFF',
            fontSize: 14,
            fontWeight: 'bold',
            offset: [0, -10]
          },
          areaStyle: {
            color: {
              type: 'linear',
              x: 0,
              y: 0,
              x2: 0,
              y2: 1,
              colorStops: [{
                offset: 0, color: 'rgba(255, 125, 0, 0.2)'
              }, {
                offset: 1, color: 'rgba(255, 125, 0, 0)'
              }]
            }
          }
        }
      ]
    };
    chartInstance.setOption(option);
  }
};

onMounted(() => {
  initChartRate();
  initChartAge();
  initLottieAnimation();
  // 等待DOM完全渲染后初始化滚动动画
  nextTick(() => {
    initScrollAnimations();
  });
})

//饼图1参数
const pieData = ref([
  { name: "博士", value: 1, itemStyle: { color: "#4A90E2" } },
  { name: "硕士", value: 33, itemStyle: { color: "#FF7D00" } },
  { name: "本科", value: 64, itemStyle: { color: "#8C8C8C" } },
  { name: "大专", value: 2, itemStyle: { color: "yellow" } },
]);

//饼图2参数
const pieData2 = ref([
  { name: "工程师", value: 50, itemStyle: { color: "#B2B2B2" } },
  { name: "正高级工程师", value: 2, itemStyle: { color: "#4D7DD2" } },
  { name: "高级工程师", value: 24, itemStyle: { color: "#FD8839" } },
  { name: "助理工程师", value: 24, itemStyle: { color: "#FFCE06" } },
]);
</script>
<style scoped>
@keyframes sweep {
  0% {
    background-position: -100%;
  }

  100% {
    background-position: 200%;
  }
}

/* 上下浮动动画 */
@keyframes floatUpDown {

  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-20px);
    /* 向下移动20px */
  }
}

/* 在原样式基础上添加/修改以下内容 */
.right .box .content {
  /* 移除绝对定位，避免布局冲突 */
  position: relative;
  overflow: hidden;
}

/* 滚动容器设置为水平布局 */
.scroll-container {
  display: flex;
  width: 100%;
  height: 100%;
  transition: transform 0.5s ease;
  /* 平滑过渡效果 */
}

/* 每个滚动项占满容器宽度，确保内容居中显示 */
.scroll-item {
  min-width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  padding: 20px;
}

/* 确保图片和文字不超出边界 */
.scroll-item .img1,
.scroll-item .img2 {
  max-width: 40%;
  height: auto;
  object-fit: contain;
}

.scroll-item .contentTitle {
  max-width: 50%;
  word-break: break-word;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 4;
  /* 最多显示4行 */
  -webkit-box-orient: vertical;
}

/* 隐藏复制的条目（用于无缝循环） */
.copy-first {
  display: none;
}

/* 触发区域样式（保持原有） */
.box {
  cursor: pointer;
  /* 提示可点击 */
  /* 原有样式... */
}

/* 视频弹窗：全屏覆盖 */
.video-modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 9600px;
  height: 2240px;
  background-color: rgba(0, 0, 0, 0.95);
  /* 深色背景突出视频 */
  z-index: 9999;
  /* 最高层级，覆盖所有内容 */
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 20px;
  box-sizing: border-box;
}

/* 视频播放器：自适应全屏 */
.video-player {
  width: 9600px;
  height: 2240px;
  /* 避免超出屏幕 */
  object-fit: contain;
  /* 保持视频比例，不拉伸 */
}

/* 关闭按钮 */
.video-close {
  position: absolute;
  top: 20px;
  right: 30px;
  color: #fff;
  font-size: 40px;
  cursor: pointer;
  width: 50px;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: rgba(255, 255, 255, 0.1);
  border-radius: 50%;
  transition: all 0.3s;
}

.video-close:hover {
  background-color: #ff4d4f;
  /* hover时变红，增强交互 */
}

/* 禁止页面滚动（弹窗显示时） */
:deep(body) {
  overflow: v-bind('showVideo ? "hidden" : "auto"');
}

.right {
  display: flex;
  position: absolute;
  flex-direction: column;
  left: 6363px;
  top: 200px;

  .box {
    margin-left: 73px;
    display: flex;
    width: 1372px;
    height: 168px;
    background-image: url("/imgs/ningbo/t.png");
    background-position: left;
    background-size: 100% 100%;
    background-repeat: no-repeat;

    .content {
      /* 关键：背景固定，不随内容滚动 */
      margin-top: 166px;
      margin-left: 120px;
      position: absolute;
      width: 908px;
      height: 396px;
      background-image: url("/imgs/ningbo/图层 1014 拷贝.png");
      background-position: left;
      background-size: 100% 100%;
      background-repeat: no-repeat;
      overflow: hidden;

      /* 滚动容器：用于承载滚动内容 */
      .scroll-container {
        width: 100%;
        position: absolute;
        top: 0;
        left: 0;
      }

      /* 单个滚动项：确保内容正确显示 */
      .scroll-item {
        align-items: center;
        justify-content: space-between;
        width: 98%;
        /* height: 350px; */
        display: flex;
        align-items: center;
      }

      /* 图片和文字样式保持不变，确保在滚动项中居中 */
      .img1 {
        margin: 0 auto !important;
        width: 400px !important;
        height: 305px !important;
      }

      .img2 {
        margin: 0 auto !important;
        width: 400px;
        height: 277px;
      }

      .contentTitle {
        padding: 0 20px;
        text-align: left;
        width: 300px;
        font-size: 30px;
        text-align: center;
      }

      /* 复制的第一个条目初始隐藏 */
      .copy-first {
        display: none;
      }
    }
  }
}

/* 可选：鼠标悬停暂停滚动 */
.right .box .content .scroll-container:hover {
  animation-play-state: paused;
}

/* 可视区域容器：固定为目标分辨率6240*1456 */
.page-container {
  width: 6240px;
  height: 1456px;
  overflow: hidden;
  position: relative;
  margin: 0 auto;
}

/* 原始设计稿容器：基于9600*2240，通过缩放适配新分辨率 */
.scale-container {
  width: 9600px;
  height: 2240px;
  transform: scale(0.65);
  transform-origin: 0 0;
  position: relative;
}


.lottie-box {
  z-index: 99;
  position: absolute;
  left: 969px;
  top: 386px;
  width: 885px;
  height: 889px;
  font-size: 80px;
}

.headTitle {
  text-align: center;
  position: relative;
  top: -24px;
  font-size: 130px;
  font-family: YouSheBiaoTiHei;
  font-weight: 400;
  color: #FFFFFF;
  background: linear-gradient(0deg, rgba(0, 216, 255, 0.66) 10%, rgba(255, 255, 255, 1) 70%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.left1 {
  z-index: 999;
  cursor: pointer;
  top: 45%;
  left: 10px;
  position: absolute;
  width: 94px;
  height: 258px;
  background-image: url("/imgs/home/left1.png");
  background-position: left;
  background-size: 100% 100%;
  background-repeat: no-repeat;
}

.right1 {
  z-index: 999;
  cursor: pointer;
  position: absolute;
  top: 45%;
  right: 10px;
  width: 94px;
  height: 258px;
  background-image: url("/imgs/home/right1.png");
  background-position: left;
  background-size: 100% 100%;
  background-repeat: no-repeat;
}

.headButton {
  cursor: pointer;
  display: flex;
  float: inline-end;
  justify-content: center;
  align-items: center;
  position: absolute;
  bottom: 20px;
  right: 20px;
  width: 78px;
  height: 78px;
  background-image: url("/imgs/ningbo/cancel.png");
  background-position: left;
  background-size: 100% 100%;
  background-repeat: no-repeat;
}


.left {
  display: flex;
  gap: 80px;

  .box {
    margin-left: 73px;
    display: flex;
    width: 1372px;
    height: 168px;
    background-image: url("/imgs/ningbo/t.png");
    background-position: left;
    background-size: 100% 100%;
    background-repeat: no-repeat;

    .headImg {
      margin-left: 220px;
      margin-top: 41px;
      width: 53px;
      height: 58px;
      background-image: url("/imgs/ningbo/菱形 拷贝.png");
      background-position: left;
      background-size: 100% 100%;
      background-repeat: no-repeat;
    }

    .title {
      margin-left: 30px;
      margin-top: 22px;
      height: 49px;
      font-family: "微软雅黑粗体";
      font-weight: 400;
      font-size: 57px;
      color: #FFFFFF;
    }

    .content {
      margin-left: 100px;
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      align-items: flex-start;
      position: absolute;
      top: 402px;
      width: 1476px;
      height: 1168px;
      background-image: url("/imgs/ningbo/矩形 933 拷贝 3.png");
      background-position: left;
      background-size: 100% 100%;
      background-repeat: no-repeat;

      .img1 {
        width: 1407px;
        height: 646px;
      }

      .contentTitle {
        padding: 0 20px;
        text-align: justify;
        text-justify: inter-ideograph;
        position: relative;
        line-height: 60px;
        top: -170px;
        text-indent: 3.5ch;
        width: 1356px;
        height: 100px;
        font-family: "微软雅黑常规";
        font-weight: 400;
        font-size: 34px;
        color: #FFFFFF;
      }
    }
  }

  .box2 {
    margin-left: 132px;
    display: flex;
    width: 1372px;
    height: 168px;
    background-image: url("/imgs/ningbo/t.png");
    background-position: left;
    background-size: 100% 100%;
    background-repeat: no-repeat;

    .headImg {
      margin-left: 220px;
      margin-top: 41px;
      width: 53px;
      height: 58px;
      background-image: url("/imgs/ningbo/菱形 拷贝.png");
      background-position: left;
      background-size: 100% 100%;
      background-repeat: no-repeat;
    }

    .title {
      margin-left: 30px;
      margin-top: 22px;
      height: 49px;
      font-family: "微软雅黑粗体";
      font-weight: 400;
      font-size: 57px;
      color: #FFFFFF;
    }

    .content {
      position: absolute;
      top: 402px;
      width: 1476px;
      height: 1168px;
      background-image: url("/imgs/ningbo/矩形 933 拷贝 3.png");
      background-position: left;
      background-size: 100% 100%;
      background-repeat: no-repeat;

      .img1 {
        margin-left: 35px;
        width: 1407px;
        height: 646px;
      }

      .contentTitle {
        margin-top: 20px;
        margin-left: 60px;
        text-indent: 2ch;
        width: 1356px;
        height: 100px;
        font-family: "微软雅黑常规";
        font-weight: 400;
        font-size: 25px;
        color: #FFFFFF;
      }
    }
  }

  .box3 {
    display: flex;
    position: absolute;
    margin-top: 1400px;
    margin-left: 50px;
    display: flex;
    /* background-color: red; */
    height: 158px;
    width: 2247px;
    flex-wrap: wrap;
    flex-direction: column;
    background-image: url("/imgs/ningbo/t(1).png");
    background-position: left;
    background-size: 100% 100%;
    background-repeat: no-repeat;

    .headImg {
      margin-left: 220px;
      margin-top: 41px;
      width: 53px;
      height: 58px;
      background-image: url("/imgs/ningbo/菱形 拷贝.png");
      background-position: left;
      background-size: 100% 100%;
      background-repeat: no-repeat;
    }

    .title {
      margin-left: 30px;
      margin-top: 22px;
      height: 49px;
      font-family: "微软雅黑粗体";
      font-weight: 400;
      font-size: 57px;
      color: #FFFFFF;
    }


    .content {
      position: relative;
      left: -500px;
      flex-wrap: nowrap;
      top: 132px;
      display: flex;
      justify-content: center;
      align-items: center;
      cursor: pointer;

      .img1 {
        display: flex;
        justify-content: center;
        align-items: center;

        width: 135px;
        height: 421px;
        background-image: url("/imgs/ningbo/图层 1056.png");
        background-position: left;
        background-size: 100% 100%;
        background-repeat: no-repeat;

        .title1 {
          /* position: relative; */
          writing-mode: vertical-rl;
          width: 50px;
          top: 150px;
          font-family: FZLanTingHeiS-B-GB;
          font-weight: 400;
          font-size: 39px;
          letter-spacing: 6px;
          color: #FFFFFF;
        }
      }

      .img2 {
        /* position: absolute; */
        display: flex;
        align-items: center;
        justify-content: center;
        top: 100px;
        left: 150px;
        width: 308px;
        height: 308px;
        background-image: url("/imgs/ningbo/矩形 515.png");
        background-position: left;
        background-size: 100% 100%;
        background-repeat: no-repeat;

        .imgicon {
          position: relative;
          top: 50px;
          background-image: url("/imgs/ningbo/icon.png");
          background-position: left;
          background-size: 100% 100%;
          background-repeat: no-repeat;
          width: 237px;
          height: 224px;
        }

        .img2-1 {
          position: absolute;
          top: 120px;
          width: 170px;
          height: 126px;
          animation: floatUpDown 2s ease-in-out infinite;
          background-image: url("/imgs/ningbo/组 7780.png");
          background-position: left;
          background-size: 100% 100%;
          background-repeat: no-repeat;
        }

        .img2-2 {
          position: absolute;
          top: 120px;
          width: 166px;
          height: 123px;
          animation: floatUpDown 2s ease-in-out infinite;
          background-image: url("/imgs/ningbo/组 7780 拷贝.png");
          background-position: left;
          background-size: 100% 100%;
          background-repeat: no-repeat;
        }

        .img2-3 {
          position: absolute;
          top: 120px;
          width: 158px;
          height: 136px;
          animation: floatUpDown 2s ease-in-out infinite;
          background-image: url("/imgs/ningbo/组 7780 拷贝 2.png");
          background-position: left;
          background-size: 100% 100%;
          background-repeat: no-repeat;
        }

        .img2-4 {
          position: absolute;
          top: 120px;
          width: 147px;
          height: 147px;
          animation: floatUpDown 2s ease-in-out infinite;
          background-image: url("/imgs/ningbo/组 7780 拷贝 3.png");
          background-position: left;
          background-size: 100% 100%;
          background-repeat: no-repeat;
        }

        .img2-5 {
          position: absolute;
          top: 120px;
          width: 152px;
          height: 145px;
          animation: floatUpDown 2s ease-in-out infinite;
          background-image: url("/imgs/ningbo/组 7780 拷贝 4.png");
          background-position: left;
          background-size: 100% 100%;
          background-repeat: no-repeat;
        }

        .img2-6 {
          position: absolute;
          top: 120px;
          width: 135px;
          height: 152px;
          animation: floatUpDown 2s ease-in-out infinite;
          background-image: url("/imgs/ningbo/组 7780 拷贝 5.png");
          background-position: left;
          background-size: 100% 100%;
          background-repeat: no-repeat;
        }

        .img2-7 {
          position: absolute;
          top: 120px;
          width: 135px;
          height: 147px;
          animation: floatUpDown 2s ease-in-out infinite;
          background-image: url("/imgs/ningbo/组 7780 拷贝 6.png");
          background-position: left;
          background-size: 100% 100%;
          background-repeat: no-repeat;
        }
      }

      .contentTitle {

        margin-top: 20px;
        margin-left: 60px;
        text-indent: 2ch;
        width: 1356px;
        height: 100px;
        font-family: "微软雅黑常规";
        font-weight: 400;
        font-size: 25px;
        color: #FFFFFF;
      }
    }
  }
}

.middle {
  position: absolute;
  left: 3364px;
  top: 257px;
  width: 2874px;
  height: 521px;
  background-image: url("/imgs/ningbo/矩形 606.png");
  background-position: left;
  background-size: 100% 100%;
  background-repeat: no-repeat;

  .img1 {
    position: relative;
    left: 105px;
    top: 135px;
    width: 485px;
    height: 160px;
    background-image: url("/imgs/ningbo/组 7775(1).png");
    background-position: left;
    background-size: 100% 100%;
    background-repeat: no-repeat;
  }

  .img2 {
    position: relative;
    left: 643px;
    top: 20px;
    width: 2087px;
    height: 75px;
    background-image: url("/imgs/ningbo/heng.png");
    background-position: left;
    background-size: 100% 100%;
    background-repeat: no-repeat;
  }

  .content {
    top: -136px;
    left: 600px;
    position: relative;

    .years {
      font-family: "微软雅黑常规";
      font-weight: bold;
      font-size: 29px;
      color: #D6F9FF;
      line-height: 43px;
    }

    .values {
      font-family: "微软雅黑常规";
      font-weight: 400;
      font-size: 18px;
      color: #D6F9FF;
      line-height: 29px;
    }
  }

  .content2 {
    top: -40px;
    left: 750px;
    position: relative;

    .years {
      font-family: "微软雅黑常规";
      font-weight: bold;
      font-size: 29px;
      color: #D6F9FF;
      line-height: 43px;
    }

    .values {
      font-family: "微软雅黑常规";
      font-weight: 400;
      font-size: 18px;
      color: #D6F9FF;
      line-height: 29px;
    }
  }

  .content3 {
    top: -284px;
    left: 880px;
    position: relative;

    .years {
      font-family: "微软雅黑常规";
      font-weight: bold;
      font-size: 29px;
      color: #D6F9FF;
      line-height: 43px;
    }

    .values {
      font-family: "微软雅黑常规";
      font-weight: 400;
      font-size: 18px;
      color: #D6F9FF;
      line-height: 29px;
    }
  }

  .content4 {
    top: -187px;
    left: 1027px;
    position: relative;

    .years {
      font-family: "微软雅黑常规";
      font-weight: bold;
      font-size: 29px;
      color: #D6F9FF;
      line-height: 43px;
    }

    .values {
      width: 200px;
      font-family: "微软雅黑常规";
      font-weight: 400;
      font-size: 18px;
      color: #D6F9FF;
      line-height: 29px;
    }
  }

  .content5 {
    top: -476px;
    left: 1154px;
    position: relative;

    .years {
      font-family: "微软雅黑常规";
      font-weight: bold;
      font-size: 29px;
      color: #D6F9FF;
      line-height: 43px;
    }

    .values {
      width: 200px;
      font-family: "微软雅黑常规";
      font-weight: 400;
      font-size: 18px;
      color: #D6F9FF;
      line-height: 29px;
    }
  }

  .content6 {
    top: -391px;
    left: 1269px;
    position: relative;

    .years {
      font-family: "微软雅黑常规";
      font-weight: bold;
      font-size: 29px;
      color: #D6F9FF;
      line-height: 43px;
    }

    .values {
      width: 300px;
      font-family: "微软雅黑常规";
      font-weight: 400;
      font-size: 18px;
      color: #D6F9FF;
      line-height: 29px;
    }
  }

  .content7 {
    top: -677px;
    left: 1446px;
    position: relative;

    .years {
      font-family: "微软雅黑常规";
      font-weight: bold;
      font-size: 29px;
      color: #D6F9FF;
      line-height: 43px;
    }

    .values {
      width: 200px;
      font-family: "微软雅黑常规";
      font-weight: 400;
      font-size: 18px;
      color: #D6F9FF;
      line-height: 29px;
    }
  }

  .content8 {
    top: -595px;
    left: 1550px;
    position: relative;

    .years {
      font-family: "微软雅黑常规";
      font-weight: bold;
      font-size: 29px;
      color: #D6F9FF;
      line-height: 43px;
    }

    .values {
      width: 200px;
      font-family: "微软雅黑常规";
      font-weight: 400;
      font-size: 18px;
      color: #D6F9FF;
      line-height: 29px;
    }
  }

  .content9 {
    top: -880px;
    left: 1743px;
    position: relative;

    .years {
      font-family: "微软雅黑常规";
      font-weight: bold;
      font-size: 29px;
      color: #D6F9FF;
      line-height: 43px;
    }

    .values {
      width: 200px;
      font-family: "微软雅黑常规";
      font-weight: 400;
      font-size: 18px;
      color: #D6F9FF;
      line-height: 29px;
    }
  }

  .content10 {
    top: -795px;
    left: 1864px;
    position: relative;

    .years {
      font-family: "微软雅黑常规";
      font-weight: bold;
      font-size: 29px;
      color: #D6F9FF;
      line-height: 43px;
    }

    .values {
      width: 209px;
      font-family: "微软雅黑常规";
      font-weight: 400;
      font-size: 18px;
      color: #D6F9FF;
      line-height: 29px;
    }
  }

  .content11 {
    top: -1108px;
    left: 2028px;
    position: relative;

    .years {
      font-family: "微软雅黑常规";
      font-weight: bold;
      font-size: 29px;
      color: #D6F9FF;
      line-height: 43px;
    }

    .values {
      width: 200px;
      font-family: "微软雅黑常规";
      font-weight: 400;
      font-size: 18px;
      color: #D6F9FF;
      line-height: 29px;
    }
  }

  .content12 {
    top: -1030px;
    left: 2188px;
    position: relative;

    .years {
      font-family: "微软雅黑常规";
      font-weight: bold;
      font-size: 29px;
      color: #D6F9FF;
      line-height: 43px;
    }

    .values {
      width: 200px;
      font-family: "微软雅黑常规";
      font-weight: 400;
      font-size: 18px;
      color: #D6F9FF;
      line-height: 29px;
    }
  }

  .content13 {
    top: -1364px;
    left: 2311px;
    position: relative;

    .years {
      font-family: "微软雅黑常规";
      font-weight: bold;
      font-size: 29px;
      color: #D6F9FF;
      line-height: 43px;
    }

    .values {
      width: 429px;
      font-family: "微软雅黑常规";
      font-weight: 400;
      font-size: 18px;
      color: #D6F9FF;
      line-height: 29px;
    }
  }

  .content14 {
    top: -1292px;
    left: 2412px;
    position: relative;

    .years {
      font-family: "微软雅黑常规";
      font-weight: bold;
      font-size: 29px;
      color: #D6F9FF;
      line-height: 43px;
    }

    .values {
      width: 475px;
      font-family: "微软雅黑常规";
      font-weight: 400;
      font-size: 18px;
      color: #D6F9FF;
      line-height: 29px;
    }
  }

  .content15 {
    position: absolute;
    top: 420px;
    left: 238px;
    font-family: FZLanTingHeiS-B-GB;
    font-weight: 400;
    font-size: 53px;
    color: #FFFFFF;
    background: linear-gradient(0deg, rgba(255, 132, 0, 0.66) 10%, rgba(255, 224, 170, 1) 70%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
  }

  .content16 {
    position: absolute;
    top: 430px;
    left: 1421px;
    width: 3px;
    height: 63px;
    background: #9EF0FF;
    opacity: 0.6;
    display: block;
    border: none;
  }

  .content17 {
    position: absolute;
    top: 420px;
    left: 1710px;
    font-family: "FZLanTingHeiS-B-GB";
    font-weight: 400;
    font-size: 53px;
    color: #FFFFFF;
    background: linear-gradient(0deg, rgba(46, 131, 183, 0.66) 10%, rgba(255, 255, 255, 1) 70%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
  }

  .content18 {
    display: flex;
    position: relative;
    justify-content: center;
    align-content: center;
    top: -1144px;
    /* left: 97px; */
    z-index: 999;

    .tubiao1 {
      width: 102px;
      height: 102px;
      background-image: url("/imgs/ningbo/组 7752.png");
      background-position: left;
      background-size: 100% 100%;
      background-repeat: no-repeat;
    }

    .tubiao2 {
      width: 102px;
      height: 102px;
      background-image: url("/imgs/ningbo/组 7752 拷贝.png");
      background-position: left;
      background-size: 100% 100%;
      background-repeat: no-repeat;
    }

    .tubiao3 {
      width: 102px;
      height: 102px;
      background-image: url("/imgs/ningbo/组 7752 拷贝 3.png");
      background-position: left;
      background-size: 100% 100%;
      background-repeat: no-repeat;
    }

    .tubiao4 {
      width: 102px;
      height: 102px;
      background-image: url("/imgs/ningbo/组 7752 拷贝 3(1).png");
      background-position: left;
      background-size: 100% 100%;
      background-repeat: no-repeat;
    }

    .tubiaoTitle {
      margin-left: 20px;
      margin-right: 20px;
      position: relative;
      top: -29px;
      width: auto;
      font-family: FZLanTingHeiS-B-GB;
      font-weight: 400;
      font-size: 42px;
      color: #FFFFFF;
      background: linear-gradient(0deg, rgba(46, 131, 183, 0.66) 10%, rgba(255, 255, 255, 1) 70%);
      -webkit-background-clip: text;

      .tubiaoValue {
        position: relative;
        top: 9px;
        margin-left: 20px;
        margin-right: 20px;
        font-family: YouSheBiaoTiHei;
        font-weight: 400;
        font-size: 86px;
        color: #FFFFFF;

        -webkit-text-fill-color: transparent;
        background: linear-gradient(45deg,
            transparent 35%,
            rgba(#fff, 0.6),
            transparent 65%) no-repeat,
          currentColor;
        background-size: 50%;
        -webkit-background-clip: text;
        animation: sweep 2s infinite;

        background: linear-gradient(0deg, rgba(0, 216, 255, 0.66) 10%, rgba(255, 255, 255, 1) 70%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
      }
    }
  }

  .content19 {
    display: flex;
    position: relative;
    top: -1375px;
    left: 0;
    width: 2808px;
    height: 1641px;
    background-image: url("/imgs/ningbo/中间地球 2副本.png");
    background-position: left;
    background-size: 100% 100%;
    background-repeat: no-repeat;

    .img1 {
      position: relative;
      left: 532px;
      top: 287px;
      width: 1467px;
      height: 1199px;
      background-image: url("/imgs/ningbo/组 7764.png");
      background-position: left;
      background-size: 100% 100%;
      background-repeat: no-repeat;
    }

    .img2 {
      position: relative;
      left: 232px;
      top: 985px;
      width: 143px;
      height: 157px;
      background-image: url("/imgs/ningbo/图层 699.png");
      background-position: left;
      background-size: 100% 100%;
      background-repeat: no-repeat;
    }

    .img3 {
      position: relative;
      left: 174px;
      top: 1012px;
      width: 34px;
      height: 45px;
      background-image: url("/imgs/ningbo/点位 (3).png");
      background-position: left;
      background-size: 100% 100%;
      background-repeat: no-repeat;
    }

    .img4 {
      position: absolute;
      left: -200px;
      top: 170px;
      width: 620px;
      height: 884px;
      background-image: url("/imgs/ningbo/CFL.png");
      background-position: left;
      background-size: 100% 100%;
      background-repeat: no-repeat;
    }

    .img5 {
      position: absolute;
      right: -200px;
      top: 170px;
      width: 620px;
      height: 884px;
      background-image: url("/imgs/ningbo/CFL.png");
      transform: scaleX(-1);
      background-position: left;
      background-size: 100% 100%;
      background-repeat: no-repeat;
    }


    .title {
      position: absolute;
      left: 1809px;
      top: 939px;
      font-family: FZLanTingHeiS-B-GB;
      font-weight: 400;
      font-size: 38px;
      color: #FFFFFF;
      background: linear-gradient(0deg, #E9DD7A 100%, #FFFFFF 100%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
    }

    .pointImg {
      position: absolute;
      top: 357px;
      left: 906px;
      width: 918px;
      height: 933px;
      background-image: url("/imgs/home/地图层 拷贝.png");

      background-position: left;
      background-size: 100% 100%;
      background-repeat: no-repeat;
    }
  }
}

.right {
  display: flex;
  position: absolute;
  flex-direction: column;
  left: 6338px;
  top: 200px;

  .box {
    margin-left: 73px;
    display: flex;
    width: 1372px;
    height: 168px;
    background-image: url("/imgs/ningbo/t.png");
    background-position: left;
    background-size: 100% 100%;
    background-repeat: no-repeat;

    .headImg {
      margin-left: 220px;
      margin-top: 41px;
      width: 53px;
      height: 58px;
      background-image: url("/imgs/ningbo/菱形 拷贝.png");
      background-position: left;
      background-size: 100% 100%;
      background-repeat: no-repeat;
    }

    .title {
      margin-left: 30px;
      margin-top: 22px;
      height: 49px;
      font-family: "微软雅黑粗体";
      font-weight: 400;
      font-size: 57px;
      color: #FFFFFF;
    }

    .content {
      margin-top: 166px;
      margin-left: 120px;
      display: flex;
      justify-content: space-around;
      align-items: center;
      position: absolute;
      width: 908px;
      height: 396px;
      background-image: url("/imgs/ningbo/图层 1014 拷贝.png");
      background-position: left;
      background-size: 100% 100%;
      background-repeat: no-repeat;

      .img1 {
        width: 234px;
        height: 305px;
      }

      .img2 {
        width: 400px;
        height: 277px;
      }

      .contentTitle {
        padding: 0 20px;
        width: 300px;
        font-family: "微软雅黑常规";
        font-weight: 400;
        font-size: 30px;
        color: #FFFFFF;
        line-height: 63px;
        text-align: left;
      }
    }
  }

  .box2 {
    margin-left: 132px;
    display: flex;
    width: 1372px;
    height: 168px;
    background-image: url("/imgs/ningbo/t.png");
    background-position: left;
    background-size: 100% 100%;
    background-repeat: no-repeat;

    .headImg {
      margin-left: 220px;
      margin-top: 41px;
      width: 53px;
      height: 58px;
      background-image: url("/imgs/ningbo/菱形 拷贝.png");
      background-position: left;
      background-size: 100% 100%;
      background-repeat: no-repeat;
    }

    .title {
      margin-left: 30px;
      margin-top: 22px;
      height: 49px;
      font-family: "微软雅黑粗体";
      font-weight: 400;
      font-size: 57px;
      color: #FFFFFF;
    }

    .content {
      position: absolute;
      top: 202px;
      width: 1476px;
      height: 1168px;
      background-image: url("/imgs/ningbo/矩形 933 拷贝 3.png");
      background-position: left;
      background-size: 100% 100%;
      background-repeat: no-repeat;

      .img1 {
        margin-left: 35px;
        width: 1407px;
        height: 646px;
      }

      .contentTitle {
        margin-top: 20px;
        margin-left: 60px;
        text-indent: 2ch;
        width: 1356px;
        height: 100px;
        font-family: "微软雅黑常规";
        font-weight: 400;
        font-size: 25px;
        color: #FFFFFF;
      }
    }
  }

  .box3 {
    position: absolute;
    margin-top: 1123px;
    margin-left: 50px;
    display: flex;
    width: 1372px;
    height: 168px;
    background-image: url("/imgs/ningbo/t(1).png");
    background-position: left;
    background-size: 100% 100%;
    background-repeat: no-repeat;

    .headImg {
      margin-left: 220px;
      margin-top: 41px;
      width: 53px;
      height: 58px;
      background-image: url("/imgs/ningbo/菱形 拷贝.png");
      background-position: left;
      background-size: 100% 100%;
      background-repeat: no-repeat;
    }

    .title {
      margin-left: 30px;
      margin-top: 22px;
      height: 49px;
      font-family: "微软雅黑粗体";
      font-weight: 400;
      font-size: 57px;
      color: #FFFFFF;
    }

    .content {
      position: absolute;
      top: 190px;
      left: 111px;
      text-align: left;
      align-items: center;
      display: flex;
      width: 1302px;
      height: 135px;
      background-image: url("/imgs/ningbo/矩形 933 拷贝 3(1).png");
      background-position: left;
      background-size: 100% 100%;
      background-repeat: no-repeat;

      .img1 {
        margin-left: 35px;
        width: 79px;
        height: 71px;
        background-image: url("/imgs/ningbo/人数 (3).png");
        background-position: left;
        background-size: 100% 100%;
        background-repeat: no-repeat;
      }

      .contentTitle {
        margin-left: 40px;
        width: 1200px;
        font-family: "微软雅黑常规";
        font-weight: 400;
        font-size: 33px;
        color: #FFFFFF;
        line-height: 49px;

        .contentValue {
          width: 867px;
          font-family: "微软雅黑常规";
          font-weight: 400;
          font-size: 33px;
          color: #FF830A;
          line-height: 49px;
        }
      }
    }

    .content2 {
      position: absolute;
      top: 305px;
      left: 111px;
      text-align: left;
      align-items: center;
      display: flex;
      width: 1302px;
      height: 135px;

      .img1 {
        margin-top: 80px;
        width: 380px;
        height: 113px;
        background-image: url("/imgs/ningbo/图层 1055 拷贝 2.png");
        background-position: left;
        background-size: 100% 100%;
        background-repeat: no-repeat;
      }

      .title {
        margin-top: 80px;
        margin-left: 90px;
        position: absolute;
        font-family: "微软雅黑常规";
        font-weight: bold;
        font-size: 31px;
        color: #FFFFFF;
      }

      .chartsGl {
        position: absolute;
        top: 95px;
        width: 400px !important;
        height: 420px !important;
      }

      .chartsGl2 {
        position: absolute;
        top: 142px;
        width: 506px !important;
        height: 380px !important;
      }
    }
  }

  .box4 {
    position: absolute;
    margin-top: 1123px;
    margin-left: 1500px;
    display: flex;
    width: 1372px;
    height: 168px;

    .content2 {
      position: absolute;
      top: 125px;
      left: 111px;
      text-align: left;
      align-items: center;
      display: flex;
      height: 135px;

      .img1 {
        margin-top: 80px;
        width: 380px;
        height: 113px;
        background-image: url("/imgs/ningbo/图层 1055 拷贝 2.png");
        background-position: left;
        background-size: 100% 100%;
        background-repeat: no-repeat;
      }

      .title {
        margin-top: 80px;
        margin-left: 70px;
        position: absolute;
        font-family: "微软雅黑常规";
        font-weight: bold;
        font-size: 31px;
        color: #FFFFFF;
      }

      .chartsGl {
        position: absolute;
        top: 160px;
        width: 337px !important;
        height: 216px !important;
      }

      .chartsGl2 {
        position: absolute;
        top: 160px;
        width: 436px !important;
        height: 263px !important;
      }

      .img2 {
        position: absolute;
        margin-top: 720px;
        width: 361px;
        height: 591px;
        background-image: url("/imgs/ningbo/矩形 743 拷贝 4.png");
        background-position: left;
        background-size: 100% 100%;
        background-repeat: no-repeat;
      }

      .title1-1 {
        text-align: center;
        position: absolute;
        top: 169px;
        left: 120px;
        width: 127px;
        height: 25px;
        font-family: "微软雅黑常规";
        font-weight: bold;
        font-size: 25px;
        color: #FFFFFF;

        .value {
          width: 64px;
          height: 26px;
          font-family: "微软雅黑常规";
          font-weight: bold;
          font-size: 25px;
          color: #FFFC00;
        }
      }

      .title2-1 {
        text-align: center;
        position: absolute;
        top: 169px;
        left: 109px;
        width: 150px;
        height: 25px;
        font-family: "微软雅黑常规";
        font-weight: bold;
        font-size: 25px;
        color: #FFFFFF;

        .value {
          width: 64px;
          height: 26px;
          font-family: "微软雅黑常规";
          font-weight: bold;
          font-size: 25px;
          color: #FFFC00;
        }
      }
    }
  }

  .box5 {
    position: absolute;
    margin-top: 1123px;
    margin-left: 2400px;
    display: flex;
    height: 168px;

    .content2 {
      position: absolute;
      top: 125px;
      left: 111px;
      text-align: left;
      align-items: center;
      display: flex;
      width: 700px;
      height: 135px;

      .img1 {
        margin-left: 100px;
        margin-top: 80px;
        width: 380px;
        height: 113px;
        background-image: url("/imgs/ningbo/图层 1055 拷贝 2.png");
        background-position: left;
        background-size: 100% 100%;
        background-repeat: no-repeat;
      }

      .title {
        margin-top: 80px;
        margin-left: 224px;
        position: absolute;
        font-family: "微软雅黑常规";
        font-weight: bold;
        font-size: 31px;
        color: #FFFFFF;
      }

      .text {
        position: absolute;
        left: 0;
        top: 200px;
        font-family: "微软雅黑常规";
        font-weight: 400;
        font-size: 29px;
        color: #FFFFFF;

        .headValue {
          font-family: "微软雅黑常规";
          font-weight: 400;
          font-size: 29px;
          color: #FF830A;
        }
      }

      .tip {
        position: relative;
        top: 341px;
        right: 160px;
        width: 206px;
        height: 43px;
        background-image: url("/imgs/ningbo/形状 1013.png");
        background-position: left;
        background-size: 100% 100%;
        background-repeat: no-repeat;

        .title3 {
          position: relative;
          top: -60px;
          left: 40px;
          font-family: "微软雅黑常规";
          font-weight: 400;
          font-size: 31px;
          color: #FFFFFF;
        }
      }

      .tiptitle {
        position: absolute;
        top: 300px;
        left: 400px;
        height: 100px;
        width: 200px;
      }

      .chartsGl2 {
        position: absolute;
        top: 270px;
        width: 728px !important;
        height: 470px !important;
      }
    }
  }
}
</style>